<style scoped>
    .company >>> .layui-form-select {
        z-index: auto;
    }
</style>

<template>
    <div class="company">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>添加产品</legend>
        </fieldset>

        <form class="layui-form " >
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">产品类型</label>
                <div class="layui-input-block">
                    <select type="text" name="type" id="type" lay-filter="type" autocomplete="off" lay-verify="required" class="layui-select">
                        <option value="">请选择</option>
                        <option v-for="(type, index) in productTypes" :value="type.dictkey">{{type.dicttext}}</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">品牌</label>
                <div class="layui-input-block">
                    <select type="text" name="brandid" id="brandid" lay-filter="brandid" autocomplete="off"
                            lay-verify="required" class="layui-select" lay-search>
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">品种</label>
                <div class="layui-input-block">
                    <select type="text" name="productGuid"    id="productGuid" lay-filter="productGuid" autocomplete="off"   lay-verify="required" class="layui-select" lay-search>
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">产品编号</label>
                <div class="layui-input-block">
                    <input type="text" name="code" required lay-verify="required"  placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">产品名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required lay-verify="required"  placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
<!--            <div class="layui-form-item">
                <label class="layui-form-label">单位</label>
                <div class="layui-input-block">
                    <input type="text" name="unit" lay-verify="required" placeholder="请输入单位名称，如：袋" autocomplete="off" class="layui-input">
                </div>
            </div>-->
            <div class="layui-form-item">
                <label class="layui-form-label">单位</label>
                <div class="layui-input-block" style="z-index: 1;">
                    <select type="text" name="stockunit" id="stockunit" lay-filter="valuation"  autocomplete="off" lay-verify="required" class="layui-select">
                        <option value="">请选择</option>
                        <option v-for="(valuation, index) in units" :value="valuation.id">{{valuation.unitname}}</option>
                    </select>
                </div>
            </div>
<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label">库存单位</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="hidden" name="whinunitName" :value="whinunit.dicttext">-->
<!--                    <select type="text" name="whinunit" lay-filter="whinunit"  autocomplete="off" lay-verify="required" class="layui-select">-->
<!--                        <option value="">请选择</option>-->
<!--                        <option v-for="(item, index) in whinUnits" :value="item.dictkey">{{item.dicttext}}</option>-->
<!--                    </select>-->
<!--                </div>-->
<!--            </div>-->
            <div class="layui-form-item">
                <label class="layui-form-label">产品净重</label>
                <div class="layui-input-block">
                    <input type="text" name="netweight"  placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">包装重量</label>
                <div class="layui-input-block">
                    <input type="text" name="packageweight"  placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">计价方式</label>
                <div class="layui-input-block" style="z-index: 1;">
                    <select type="text" name="valuation" id="valuation" lay-filter="valuation"  autocomplete="off" lay-verify="required" class="layui-select">
                        <option value="">请选择</option>
                        <option v-for="(valuation, index) in valuations" :value="valuation.dictkey">{{valuation.dicttext}}</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">赠送(%)</label>
                <div class="layui-input-block">
                    <input type="text" name="concession"  placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">是否套装</label>
                <div class="layui-input-block">
                    <input type="radio" name="flag" value="2" title="是">
                    <input type="radio" name="flag" value="1" title="否" checked>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">产品描述</label>
                <div class="layui-input-block">
                    <textarea name="description" placeholder="" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
                    <button class="layui-btn layui-btn-primary" @click="$parent.back">返回</button>
                </div>
            </div>
        <div style="height: 200px"></div>



        </form>
    </div>
</template>

<script>
    let qs = require('qs');
    export default {
        name: 'addSalesSpecification',
        data () {
            return {
                productTypes: [],
                valuations:[ {dicttext:"按件",dictkey:1},{dicttext:"按吨",dictkey:2},],
                whinUnits: [],
                units: [],
                whinunit: ''
            }
        },
        mounted() {
            let that = this;
            this.getProductTypes();
            this.getWhinUnit();
            this.getUnits();
            layui.use(['form'], function () {
                var form = layui.form,
                    layer = layui.layer;
                form.render();
                that.loadSalesspecification();

                form.on('select(whinunit)', function(data){
                    that.whinunit = that.whinUnits.filter(item => {
                        return item.dictkey == data.value;
                    })[0];
                });

                form.on('submit(submit)', function (data) {
                    let loader = layer.load();
                    $.ajax({
                        url: '/sales/Salesspecification!add.action',
                        data: data.field,
                        type: "post",
                        dataType: "json",
                        success: function(res) {
                            if (res.info == "ok") {
                                that.toast("添加成功");
                                that.$parent.switchPage('SalesSpecification');
                            } else if (res.info == "specerror") {
                                that.toast("产品编号或名称已存在");
                            } else {
                                that.toast("系统错误");
                            }
                        },
                        complete: function () {
                            layer.close(loader);
                        }
                    });
                    return false;
                });
            });

        },
        updated() {
            layui.form.render('select');
            layui.form.render();
        },
        methods: {
            //加载用户权限信息
            loadSalesspecification:  function (){

                $.ajax({
                    url: '/sales/Salesspecification!getBaseInfo.action',
                    type: "post",
                    dataType: "json",
                    success: function(res) {
                        if (res.msg == "scucess") {
                            $.each(res.brands, function (index, item) {

                                $('#brandid').append(new Option(item.name, item.guid));
                            });
                            layui.form.render("select");
                            $.each(res.products, function (index, item) {

                                $('#productGuid').append(new Option(item.productname , item.guid));
                            });
                            layui.form.render("select");
                        } else {
                            alert("系统错误");
                        }
                    }
                });
            },
            getProductTypes: function() {
                this.$post('/sales/Sellform!findDict.action', qs.stringify({type: 91})).then(response => {
                    if (response.statusText == "OK") {
                        this.productTypes = response.data;
                    } else {
                        this.toastText('获取产品类型数据失败');
                    }
                });
            },
            getWhinUnit: function() {
                this.$post('/sales/Sellform!findDict.action', qs.stringify({type: 9})).then(response => {
                    if (response.statusText == "OK") {
                        this.whinUnits = response.data;
                    } else {
                        this.toastText('获取产品类型数据失败');
                    }
                });
            },
            getUnits: function() {
                this.$post('/sales/Stockunit!getAll.action', qs.stringify({type: 9})).then(response => {
                    if (response.statusText == "OK") {
                        this.units = response.data;
                    } else {
                        this.toastText('获取产品类型数据失败');
                    }
                });
            }
        }
    }
</script>
